<template>
  <div>
    <el-row>
      <el-col :offset="14" :span="6">
        <el-link :underline="false" @click="order">验货下单</el-link>
        <el-link :underline="false">验货员搜索</el-link>
        <el-link :underline="false">订单搜索</el-link>
        <el-link :underline="false">我们的服务</el-link>
        <el-link :underline="false">关于我们</el-link>
      </el-col>
      <el-col :span="4">
        <el-link :underline="false" type="primary">用户登录</el-link>
        <el-link :underline="false" type="primary">立即注册</el-link>
      </el-col>
    </el-row>
    <el-row class="row-margin-top">
      <el-col :offset="10" :span="14">
        <el-image
          style="width: 100px; height: 100px"
          :src="require('../../assets/image/user.png')"
           ></el-image>
      </el-col>
    </el-row>
    <el-row>
      <el-col :offset="4" :span="14">
        <el-input placeholder="验货请输入地址关键字快速查询、下单 例:宁波"  class="input-with-select">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </el-col>
    </el-row>
    <el-row>
      <el-col :offset="4" :span="1">
        <el-image
          style="width: 50px; height: 50px"
          :src="require('../../assets/image/prac.png')"
           >
        </el-image><br/>
        <el-link :underline="false">抽检FRI</el-link>
      </el-col>
      <el-col :offset="1" :span="1">
        <el-image
          style="width: 50px; height: 50px"
          :src="require('../../assets/image/prac.png')"
           >
        </el-image><br/>
        <el-link :underline="false">全检FRI</el-link>
      </el-col>
      <el-col :offset="1" :span="1">
        <el-image
          style="width: 50px; height: 50px"
          :src="require('../../assets/image/prac.png')"
           >
        </el-image><br/>
        <el-link :underline="false">在线检验OLI</el-link>
      </el-col>
      <el-col :offset="1" :span="1">
        <el-image
          style="width: 50px; height: 50px"
          :src="require('../../assets/image/prac.png')"
           >
        </el-image><br/>
        <el-link :underline="false">验厂FAT</el-link>
      </el-col>
      <el-col :offset="1" :span="1">
        <el-image
          style="width: 50px; height: 50px"
          :src="require('../../assets/image/prac.png')"
           >
        </el-image><br/>
        <el-link :underline="false">监柜CLS</el-link>
      </el-col>
      <el-col :offset="1" :span="1">
        <el-image
          style="width: 50px; height: 50px"
          :src="require('../../assets/image/prac.png')"
           >
        </el-image><br/>
        <el-link :underline="false">验货+监柜FRI+CLS</el-link>

      </el-col>
    </el-row>
    <el-row class="row-margin-top">
      <el-col :offset="2" :span="2"><span>订单列表</span></el-col>
      <el-col :offset="10" :span="2"><span>今日下单票数:</span><el-link :underline="false" type="primary">{{today}}</el-link></el-col>
      <el-col :span="2"><span>累计下单票数:</span><el-link :underline="false" type="primary">{{all}}</el-link></el-col>
      <el-col :span="2"><el-link :underline="false" type="primary">查看更多</el-link></el-col>
    </el-row>
    <hr width="1400px">
    <el-row>
      <el-col :offset="2" :span="20">
        <el-table
          :data="tableData"
          stripe
          :header-cell-style="{'background-color':'#2eacfa','color':'#fafafa'}"
          style="width: 100%">
          <el-table-column
            prop="country"
            label="国家"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="客户"
            width="180">
          </el-table-column>
          <el-table-column
            prop="product"
            label="产品名称">
          </el-table-column>
          <el-table-column
          prop="date"
          label="验货日期">
          </el-table-column>
          <el-table-column
            prop="city"
            label="验货城市">
          </el-table-column>
          <el-table-column
            prop="type"
            label="验货类型">
          </el-table-column>
          <el-table-column
            prop="statue"
            label="验货状态">
          </el-table-column>
          <el-table-column
            prop="time"
            label="下单时间">
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col :offset="10" :span="4">
        <h2>环球验货服务能力</h2>
      </el-col>
    </el-row>
    <el-row>
      <el-col :offset="4" :span="3">
        <el-image
          style="width: 50px; height: 50px"
          :src="require('../../assets/image/access.png')"
           >
        </el-image><br/>
      </el-col>
      <el-col :offset="4" :span="3">
        <el-image
          style="width: 50px; height: 50px"
          :src="require('../../assets/image/brand.png')"
           >
        </el-image><br/>
      </el-col>
      <el-col :offset="4" :span="3">
        <el-image
          style="width: 50px; height: 50px"
          :src="require('../../assets/image/ratingPower.png')"
           >
        </el-image><br/>
      </el-col>

    </el-row>
  </div>
</template>

<script>
    export default {
      name: 'IndexPage',
      data () {
        return {
          url: 'www.baidu.com',
          today: 20,
          all: 2000,
          tableData: [{
            country: '美国',
            name: 'c***g',
            product: 'product',
            date: '2019-10-06',
            city: 'city',
            type: 'type',
            statue: 'statue',
            time: '一小时前'
          }, {
            country: '美国',
            name: 'c***g',
            product: 'product',
            date: '2019-10-06',
            city: 'city',
            type: 'type',
            statue: 'statue',
            time: '一小时前'
          }, {
            country: '美国',
            name: 'c***g',
            product: 'product',
            date: '2019-10-06',
            city: 'city',
            type: 'type',
            statue: 'statue',
            time: '一小时前'
          }, {
            country: '美国',
            name: 'c***g',
            product: 'product',
            date: '2019-10-06',
            city: 'city',
            type: 'type',
            statue: 'statue',
            time: '一小时前'
          }]
        }
      },
      created () {

      },
      methods: {
        order () {
          window.location.href=this.url;
        }
      }

    }
</script>

<style scoped>
  .row-margin-top{
    margin-top: 100px;
  }


</style>
